import { exportExcel, exportPageTophubRecord } from '@/services/api/api-tophub-export';
import { ActionType, DrawerForm, ProColumns, ProForm, ProTable } from '@ant-design/pro-components';
import { useAccess, useModel } from '@umijs/max';
import { Button, message, Tag } from 'antd';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import React, { useRef, useState } from 'react';

dayjs.extend(customParseFormat);

const dateFormat = 'YYYY-MM-DD';

interface MonitorSourceProps {
  onRefurbish: () => void;
}

const MonitorSource: React.FC<MonitorSourceProps> = ({ onRefurbish }) => {
  const access = useAccess();

  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};
  
  const actionRef = useRef<ActionType>();

  const [search, setSearch] = useState({
  });

  const columns: ProColumns<TophubExporData.ExportRecordSo>[] = [
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          序号
        </span>
      ),
      dataIndex: 'index',
      align: 'center',
      width: '50px',
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          热点
        </span>
      ),
      dataIndex: 'hotName',
      // align: 'center',
      copyable: true,
      ellipsis: true,
      width: '30%',
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          上榜平台
        </span>
      ),
      dataIndex: 'hotType',
      align: 'center',
      valueEnum: {
        1: { text: '微博' },
        2: { text: '抖音' },
        4: { text: '今日头条' },
      },
      width: '80px',
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          最高排名
        </span>
      ),
      width: '80px',
      dataIndex: 'hotMaxTopIndex',
      align: 'center',
      sorter: true,
      render: (dom, entity, index, action) => {
        if (entity.hotMaxTopIndex == 1) {
          return (
            <>
              <Tag
                style={{
                  marginRight: 0,
                  width: 32,
                  textAlign: 'center',
                }}
                color="#ff5e57"
              >
                {entity.hotMaxTopIndex}
              </Tag>
            </>
          );
        } else if (entity.hotMaxTopIndex == 2) {
          return (
            <Tag
              style={{
                marginRight: 0,
                width: 32,
                textAlign: 'center',
              }}
              color="#ffd32a"
            >
              {entity.hotMaxTopIndex}
            </Tag>
          );
        } else if (entity.hotMaxTopIndex == 3) {
          return (
            <Tag
              style={{
                marginRight: 0,
                width: 32,
                textAlign: 'center',
              }}
              color="#7bed9f"
            >
              {entity.hotMaxTopIndex}
            </Tag>
          );
        } else if (entity.hotMaxTopIndex <= 10) {
          return (
            <Tag
              style={{
                marginRight: 0,
                width: 32,
                textAlign: 'center',
                padding: 0,
              }}
              color="#ced6e0"
            >
              {entity.hotMaxTopIndex}
            </Tag>
          );
        } else {
          return <>{entity.hotMaxTopIndex}</>;
        }
      },
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          热搜范围
        </span>
      ),
      dataIndex: 'hotIsCity',
      align: 'center',
      width: '80px',
      valueEnum: {
        0: { text: '全国' },
        1: { text: '重庆' },
      },
      sorter: true,
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          发布媒体
        </span>
      ),
      dataIndex: 'datahubSourceName',
      align: 'center',
      width: '80px',
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          媒体类别
        </span>
      ),
      dataIndex: 'datahubLevelName',
      align: 'center',
      width: '80px',
      valueEnum: {
        2000: { text: '市属媒体' },
        3000: { text: '区县媒体' },
      },
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          首次上榜时间
        </span>
      ),
      dataIndex: 'hotInsertTime',
      align: 'center',
      width: '120px',
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          收录时间
        </span>
      ),
      dataIndex: 'createdTime',
      align: 'center',
      width: '100px',
      // render: (dom, entity, index, action) => dayjs(entity.createdTime).format('MM-DD HH:mm'),
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          得分
        </span>
      ),
      dataIndex: 'source',
      align: 'center',
      width: '100px',
    },
  ];

  return (
    <DrawerForm
      title={'导出热搜热榜'}
      trigger={<Button type="primary">导出热搜热榜</Button>}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
        width: 1100,
      }}
      initialValues={{}}
      onOpenChange={async (visible) => {
        if (visible) {
        }
      }}
      onValuesChange={(values) => {
        console.log('====', values);
        setSearch({
          ...search,
          ...values,
        });

        actionRef.current?.reloadAndRest();
      }}
      submitter={false}
      onFinish={async (values) => {
        console.log(values);

        const response = await exportExcel({
          ...search,
        });
        if (response.code === 0) {
          message.success('提交成功');
          onRefurbish();
        }
        return false;
      }}
    >
      <ProForm.Group></ProForm.Group>
      <ProTable<TophubExporData.ExportRecordSo>
        columns={columns}
        actionRef={actionRef}
        rowKey="id"
        request={async (params = {}, sorter) => {
          setSearch({
            ...search,
            sorter: sorter,
          });

          const response = await exportPageTophubRecord({
            ...params,
            ...search,
            sorter: sorter,
          });

          return {
            data: response.data?.data,
            success: true,
            total: response.data?.total,
          };
        }}
        dateFormatter="id"
        defaultSize={'small'}
        search={false}
        options={{
          density: false,
          setting: false,
        }}
        pagination={{
          showQuickJumper: true,
          showSizeChanger: true,
          defaultPageSize: 20,
        }}
        ghost
      />
    </DrawerForm>
  );
};
export default MonitorSource;
